<template>
  <div class="documentation-view">
    <h1>产品文档</h1>
    <el-tabs v-model="activeTab" class="document-tabs">
      <el-tab-pane label="用户手册" name="manual">
        <div class="document-section">
          <h3 class="section-title">用户手册</h3>
          <el-collapse v-model="activeManual" accordion>
            <el-collapse-item v-for="(item, index) in manuals" :key="index" :title="item.title" :name="item.id">
              <div v-html="item.content"></div>
              <div class="download-btn">
                <el-button type="primary" size="small" @click="downloadDocument(item.file)">
                  <el-icon><Download /></el-icon>
                  下载PDF
                </el-button>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-tab-pane>

      <el-tab-pane label="API文档" name="api">
        <div class="document-section">
          <h3 class="section-title">API接口文档</h3>
          <el-table :data="apiDocs" stripe style="width: 100%">
            <el-table-column prop="name" label="接口名称" width="180" />
            <el-table-column prop="method" label="请求方法" width="100">
              <template #default="{row}">
                <el-tag :type="getMethodType(row.method)">{{ row.method }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="url" label="接口地址" />
            <el-table-column label="操作" width="120">
              <template #default="{row}">
                <el-button size="small" @click="viewApiDetail(row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="技术白皮书" name="whitepaper">
        <div class="document-section">
          <h3 class="section-title">技术白皮书</h3>
          <el-card v-for="(paper, index) in whitepapers" :key="index" class="paper-card">
            <template #header>
              <div class="paper-header">
                <span>{{ paper.title }}</span>
                <el-button type="primary" size="small" @click="downloadDocument(paper.file)">
                  下载
                </el-button>
              </div>
            </template>
            <div class="paper-content">
              <p>{{ paper.description }}</p>
              <p class="paper-meta">版本: {{ paper.version }} | 更新日期: {{ paper.date }}</p>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- API详情对话框 -->
    <el-dialog v-model="apiDialogVisible" title="API详情" width="70%">
      <div v-if="currentApi" class="api-detail">
        <h3>{{ currentApi.name }}</h3>
        <el-tag :type="getMethodType(currentApi.method)">{{ currentApi.method }}</el-tag>
        <code class="api-url">{{ currentApi.url }}</code>
        
        <el-divider />
        
        <div class="api-section">
          <h4>请求参数</h4>
          <el-table :data="currentApi.params" border style="width: 100%">
            <el-table-column prop="name" label="参数名" width="180" />
            <el-table-column prop="type" label="类型" width="120" />
            <el-table-column prop="required" label="必填" width="80">
              <template #default="{row}">
                <el-tag v-if="row.required" type="danger">是</el-tag>
                <el-tag v-else type="success">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="description" label="说明" />
          </el-table>
        </div>
        
        <div class="api-section">
          <h4>返回示例</h4>
          <pre class="response-example">{{ currentApi.response }}</pre>
        </div>
      </div>
      <template #footer>
        <el-button @click="apiDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Download } from '@element-plus/icons-vue'

const router = useRouter()

const activeTab = ref('manual')
const activeManual = ref('1')
const apiDialogVisible = ref(false)
const currentApi = ref(null)

const manuals = ref([
  {
    id: '1',
    title: '快速入门指南',
    content: '<p>本指南将帮助您快速了解AgriVista-智农云视野的基本功能和操作流程。</p><ul><li>系统登录与账号设置</li><li>主界面功能介绍</li><li>数据录入与查询</li><li>报表生成与导出</li></ul>',
    file: 'quick-start-guide.pdf'
  },
  {
    id: '2',
    title: '土壤检测模块使用手册',
    content: '<p>详细介绍土壤检测模块的各项功能和使用方法。</p><ul><li>土壤样本录入</li><li>检测数据分析</li><li>历史数据对比</li><li>报告生成</li></ul>',
    file: 'soil-module-manual.pdf'
  },
  {
    id: '3',
    title: '气象数据分析手册',
    content: '<p>气象数据模块的完整使用说明。</p><ul><li>气象数据接入</li><li>数据分析方法</li><li>预测模型使用</li><li>预警设置</li></ul>',
    file: 'weather-manual.pdf'
  }
])

const apiDocs = ref([
  {
    name: '获取土壤检测数据',
    method: 'GET',
    url: '/api/v1/soil/data',
    params: [
      { name: 'region', type: 'string', required: true, description: '检测区域编号' },
      { name: 'date', type: 'string', required: false, description: '日期范围，格式YYYY-MM-DD' }
    ],
    response: JSON.stringify({
      code: 200,
      data: {
        region: "A01",
        phValue: 6.5,
        nutrientLevel: "medium",
        contamination: "none"
      }
    }, null, 2)
  },
  {
    name: '提交气象数据',
    method: 'POST',
    url: '/api/v1/weather',
    params: [
      { name: 'stationId', type: 'string', required: true, description: '气象站ID' },
      { name: 'temperature', type: 'number', required: true, description: '温度(℃)' },
      { name: 'humidity', type: 'number', required: true, description: '湿度(%)' }
    ],
    response: JSON.stringify({
      code: 200,
      message: "数据提交成功",
      data: {
        recordId: "W20230001"
      }
    }, null, 2)
  }
])

const whitepapers = ref([
  {
    title: 'AgriVista 智能农业平台技术架构',
    description: '详细介绍AgriVista平台的整体技术架构设计，包括前端框架、后端服务、数据存储和分析系统。',
    version: '1.2',
    date: '2023-06-15',
    file: 'tech-architecture.pdf'
  },
  {
    title: '土壤数据分析算法白皮书',
    description: '深入讲解土壤数据分析的核心算法和数学模型，包括养分评估、污染检测等关键技术。',
    version: '2.0',
    date: '2023-08-22',
    file: 'soil-algorithm.pdf'
  }
])

const downloadDocument = (filename) => {
  // 实际项目中这里应该是调用后端API下载文件
  console.log(`下载文件: ${filename}`)
  // 模拟下载
  const link = document.createElement('a')
  link.href = `/documents/${filename}`
  link.download = filename
  link.click()
}

const viewApiDetail = (api) => {
  currentApi.value = api
  apiDialogVisible.value = true
}

const getMethodType = (method) => {
  switch(method.toUpperCase()) {
    case 'GET': return ''
    case 'POST': return 'success'
    case 'PUT': return 'warning'
    case 'DELETE': return 'danger'
    default: return 'info'
  }
}
</script>

<style scoped>
.documentation-view {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  margin: 0;
  font-size: 24px;
}

.document-tabs {
  margin-top: 20px;
}

.document-section {
  margin-top: 20px;
}

.section-title {
  color: #333;
  margin-bottom: 15px;
}

.download-btn {
  margin-top: 15px;
  text-align: right;
}

.paper-card {
  margin-bottom: 15px;
}

.paper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.paper-content {
  line-height: 1.6;
}

.paper-meta {
  color: #666;
  font-size: 0.9em;
  margin-top: 10px;
}

.api-detail {
  line-height: 1.6;
}

.api-url {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  background: #f5f7fa;
  border-radius: 4px;
}

.api-section {
  margin: 20px 0;
}

.response-example {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>